<template>
  <div class="app-enter">
    <div class="left_right">
      <div class="left">
        <!-- 左侧导航 -->
        <leftTabbar></leftTabbar>
      </div>
      <div class="right">
        <navHeaderTop>
          <div class="no-drag">
            <leftRowIcon v-if="isBack" @click="gotoBackHandler"></leftRowIcon>
          </div>
          <navSearch></navSearch>
        </navHeaderTop>
        <div style="height: 40px"></div>
        <Router-view></Router-view>
      </div>
    </div>
    <div class="bottom">
      <ltMusicPlay @change-avatar="playStore.setShowLyricDrawer"></ltMusicPlay>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'

import navHeaderTop from './components/nav-header-top.vue'
import leftTabbar from './components/left-tabbar.vue'
import ltMusicPlay from '@renderer/base-ui/lt-music-play/index.vue'
import leftRowIcon from './base-ui/lt-icon/left-row-icon.vue'
import navSearch from './components/nav-search.vue'

import { useRoute, useRouter } from 'vue-router'
import usePlay from './pinia/modules/play'

const playStore = usePlay()
const route = useRoute()
const router = useRouter()

const isBack = ref(false)
// 监听路由变化
watch(
  () => route.meta,
  (value: any) => {
    console.log(value)
    isBack.value = value.back
  },
  {
    immediate: true
  }
)

onMounted(() => {
  // 初始化播放列表
  playStore.initPlayList()
})

// 返回上一页
const gotoBackHandler = () => {
  router.back()
}
</script>

<style scoped lang="scss">
.app-enter {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: url('@renderer/assets/image/defaultBg.png') no-repeat;
  background-size: cover; // 铺满

  .left_right {
    width: 100%;
    height: calc(100vh - 80px);
    display: flex;

    .left {
      flex-shrink: 0;
      width: 200px;
      background-color: var(--ev-main-bgc);
    }

    .right {
      overflow-y: auto;
      flex: 1;
    }
  }

  .bottom {
    width: 100%;
    height: 80px;
    padding: 0 20px;
    box-sizing: border-box;
    border-top: 1px solid var(--ev-main-border-color);
    background-color: var(--ev-main-bgc);
  }
}
</style>
